<template>
  <view class="show-y-scroll-bar" v-if="detailData&&detailData.order_no">
    <uni-section title="订单信息" type="line">
      <detail-text section="订单信息" style="width: 100%;" :columns="orderInfoColumns" :fields="orderFields"
        :detailData="detailData" :show-empty="true"></detail-text>
    </uni-section>
    <uni-section title="商品信息" type="line">
      <detail-list :key="detailData.order_state" :order-no="detailData.order_no"
        service='srvretail_order_detail_select'>
      </detail-list>
    </uni-section>
    <uni-section title="合计信息" type="line">
      <detail-text section="合计信息" style="width: 100%;" :columns="sumColumns" :fields="orderFields"
        :detailData="detailData"></detail-text>
    </uni-section>
    <uni-section title="交易信息" type="line">
      <detail-text section="交易信息" style="width: 100%;" :columns="payColumns" :fields="orderFields"
        :detailData="detailData"></detail-text>
    </uni-section>
    <uni-section title="参与优惠/促销活动" type="line">
      <detail-list :key="detailData.order_no" :order-no="detailData.order_no" service='srvretail_order_use_act_select'>
      </detail-list>
    </uni-section>
    <uni-section title="退货明细" type="line"
      v-if="showRefundList&& detailData.order_state&&detailData.order_state.indexOf('退款')>-1">
      <detail-list :long="true" :key="detailData.order_no" :order-no="detailData.order_no"
        service='srvretail_refund_detail_select'>
      </detail-list>
    </uni-section>
  </view>
</template>

<script>
  import detailText from './order-detail-text.vue'
  import detailList from './order-detail-list.vue'
  export default {
    components: {
      detailText,
      detailList
    },
    data() {
      return {
        showRefundList: false,
        orderFields: [],
        orderInfoColumns: ['order_no', 'sales_clerk_name', 'order_state', 'sales_clerk_staff_name', 'member_name',
          'member_phone', "order_channel", "discount_reason_name", 'remark'
        ],
        sumColumns: ['order_total_amount', 'discount_amount', 'member_discount',
          'discount_full_decrement',
          'discount_direct', 'change_price', 'discount_reduction_amount', 'free_discount_amount',
          'integral_deduction',
          'coupon_discount',
          'cash_reduction_amount', 'pay_amount'
        ],
        payColumns: ['create_time', 'payment_method', 'pay_time', 'concat_pay_amount', 'pay_flowing_water'],
      }
    },
    mounted() {
      setTimeout(() => {
        this.showRefundList = true
      }, 200)
    },
    methods: {
      refresh() {

      }
    },
    props: {
      detailData: {
        type: Object
      },
      faceDataFields: {
        type: Array
      },
    },
    watch: {
      faceDataFields: {
        immediate: true,
        deep: true,
        handler(newVal) {
          if (Array.isArray(newVal)) {
            this.orderFields = this.deepClone(newVal)
          }
        },
      },
      detailData: {
        immediate: true,
        deep: true,
        handler(newVal) {
          if (newVal?.order_state === '直接退款') {
            this.sumColumns = ["order_total_amount_str", "discount_amount", "member_discount",
              "discount_full_decrement", "discount_direct", "change_price", "discount_reduction_amount",
              "free_discount_amount", "integral_deduction", "coupon_discount", "cash_reduction_amount",
              "pay_amount_str"
            ]
            this.payColumns = ["create_time", "payment_method", "pay_time", "pay_amount_strs",
              "pay_flowing_water"
            ]
          } else {
            this.sumColumns = ['order_total_amount', 'discount_amount', 'member_discount',
              'discount_full_decrement',
              'discount_direct', 'change_price', 'discount_reduction_amount', 'free_discount_amount',
              'integral_deduction',
              'coupon_discount',
              'cash_reduction_amount', 'pay_amount'
            ]
            this.payColumns = ['create_time', 'payment_method', 'pay_time', 'concat_pay_amount',
              'pay_flowing_water'
            ]
          }
        },
      }
    },
  }
</script>

<style scoped>

</style>
